<!--课程与题库-模拟考设置-->
<template>
  <div class="exam-setting-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>考试设置</span>
      </div>

      <el-form :model="examForm" label-width="120px" :rules="rules" ref="examForm">
        <el-form-item label="名称：" prop="name">
          <el-input v-model="examForm.name" placeholder="请输入考试名称" style="width: 300px;"></el-input>
        </el-form-item>

        <el-form-item label="考试时长：" prop="duration">
          <el-input-number v-model="examForm.duration" :min="10" :max="300" :step="5"></el-input-number>
          <span style="margin-left: 10px;">分钟</span>
        </el-form-item>

<!--        <el-form-item label="考试类型：" prop="type">-->
<!--          <el-radio-group v-model="examForm.type">-->
<!--            <el-radio label="mock">模拟考试</el-radio>-->
<!--            <el-radio label="formal">正式考试</el-radio>-->
<!--          </el-radio-group>-->
<!--        </el-form-item>-->

<!--        <el-form-item label="题目来源：" prop="source">-->
<!--          <el-select v-model="examForm.source" placeholder="请选择题库" style="width: 300px;">-->
<!--            <el-option-->
<!--              v-for="bank in questionBanks"-->
<!--              :key="bank.id"-->
<!--              :label="bank.name"-->
<!--              :value="bank.id">-->
<!--              <span style="float: left">{{ bank.name }}</span>-->
<!--              <span style="float: right; color: #8492a6; font-size: 13px">{{ bank.major }}</span>-->
<!--            </el-option>-->
<!--          </el-select>-->
<!--          <el-tooltip content="系统自动从已开放给学员的题库中抽取题目" placement="top">-->
<!--            <i class="el-icon-info" style="margin-left: 5px;"></i>-->
<!--          </el-tooltip>-->
<!--        </el-form-item>-->

        <el-divider></el-divider>
        <h3>题目与分值设置</h3>

        <el-form-item label="单选题：" prop="singleChoice">
          <div class="question-setting">
            <span>共</span>
            <el-input-number v-model="examForm.singleChoice.count" :min="0" :max="200"></el-input-number>
            <span>题，每题</span>
            <el-input-number v-model="examForm.singleChoice.score" :min="0.5" :max="10" :step="0.5"></el-input-number>
            <span>分</span>
          </div>
        </el-form-item>

        <el-form-item label="多选题：" prop="multipleChoice">
          <div class="question-setting">
            <span>共</span>
            <el-input-number v-model="examForm.multipleChoice.count" :min="0" :max="100"></el-input-number>
            <span>题，每题</span>
            <el-input-number v-model="examForm.multipleChoice.score" :min="0.5" :max="10" :step="0.5"></el-input-number>
            <span>分</span>
          </div>
        </el-form-item>

        <el-form-item label="判断题：" prop="trueFalse">
          <div class="question-setting">
            <span>共</span>
            <el-input-number v-model="examForm.trueFalse.count" :min="0" :max="100"></el-input-number>
            <span>题，每题</span>
            <el-input-number v-model="examForm.trueFalse.score" :min="0.5" :max="10" :step="0.5"></el-input-number>
            <span>分</span>
          </div>
        </el-form-item>

        <el-form-item label="简答题：" prop="shortAnswer">
          <div class="question-setting">
            <span>共</span>
            <el-input-number v-model="examForm.shortAnswer.count" :min="0" :max="50"></el-input-number>
            <span>题，每题</span>
            <el-input-number v-model="examForm.shortAnswer.score" :min="1" :max="20" :step="1"></el-input-number>
            <span>分</span>
          </div>
        </el-form-item>

        <el-divider></el-divider>
<!--        <el-form-item label="总分：" prop="totalScore">-->
<!--          <span class="total-score">{{ calculateTotalScore() }} 分</span>-->
<!--        </el-form-item>-->

<!--        <el-form-item label="及格分数：" prop="passScore" v-if="examForm.type === 'formal'">-->
<!--          <el-input-number v-model="examForm.passScore" :min="0" :max="calculateTotalScore()"></el-input-number>-->
<!--          <span style="margin-left: 10px;">分</span>-->
<!--          <span style="margin-left: 20px; color: #67C23A;">-->
<!--            (及格率：{{ calculatePassRate() }}%)-->
<!--          </span>-->
<!--        </el-form-item>-->

<!--        <el-form-item label="考试时间：" prop="examTime" v-if="examForm.type === 'formal'">-->
<!--          <el-date-picker-->
<!--            v-model="examForm.examTime"-->
<!--            type="datetimerange"-->
<!--            range-separator="至"-->
<!--            start-placeholder="开始日期时间"-->
<!--            end-placeholder="结束日期时间">-->
<!--          </el-date-picker>-->
<!--        </el-form-item>-->

<!--        <el-form-item label="考试次数：" prop="attempts" v-if="examForm.type === 'formal'">-->
<!--          <el-input-number v-model="examForm.attempts" :min="1" :max="10"></el-input-number>-->
<!--          <span style="margin-left: 10px;">次</span>-->
<!--        </el-form-item>-->

        <el-form-item label="简介：" prop="description">
          <el-input
            type="textarea"
            :rows="4"
            v-model="examForm.description"
            placeholder="请输入考试简介"
            style="width: 80%;">
          </el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm('examForm')">保存</el-button>
          <el-button @click="resetForm('examForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import {querymnks, savemnks} from "../../api/InstitutionApi";

export default {
  data() {
    return {
      examForm: {
        name: '模拟考试',
        duration: 90,
        singleChoice: {
          count: 80,
          score: 1
        },
        multipleChoice: {
          count: 10,
          score: 1
        },
        trueFalse: {
          count: 10,
          score: 1
        },
        shortAnswer: {
          count: 10,
          score: 1
        },
        description: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入考试名称', trigger: 'blur' }
        ],
        duration: [
          { required: true, message: '请设置考试时长', trigger: 'blur' }
        ],
        source: [
          { required: true, message: '请选择题库', trigger: 'change' }
        ],
        description: [
          { required: true, message: '请输入考试简介', trigger: 'blur' }
        ]
      },
      mnkCode: ''  ///模拟考试code
    }
  },
  created() {
    this.getmnks()
  },
  methods: {
    // 获取模拟考试
    getmnks() {
      querymnks().then(res => {
        console.log('set:',res)
        let baseinfo = res.data.data.base_info
        this.mnkCode = baseinfo.bmnks_code
        this.examForm = {
          name: baseinfo.bmnks_name,
          duration: baseinfo.bmnks_toltime,
          singleChoice: {
            count: baseinfo.bmnks_danxuan,
            score: baseinfo.bmnks_danxuanfs
          },
          multipleChoice: {
            count: baseinfo.bmnks_duoxuan,
            score: baseinfo.bmnks_duoxuanfs
          },
          trueFalse: {
            count: baseinfo.bmnks_panduan,
            score: baseinfo.bmnks_panduanfs
          },
          shortAnswer: {
            count: baseinfo.bmnks_jianda,
            score: baseinfo.bmnks_jiandafs
          },
          description: baseinfo.bmnks_desc
        };

      })

    },
    // 部分计算
    calculateTotalScore() {
      const single = this.examForm.singleChoice.count * this.examForm.singleChoice.score;
      const multiple = this.examForm.multipleChoice.count * this.examForm.multipleChoice.score;
      const trueFalse = this.examForm.trueFalse.count * this.examForm.trueFalse.score;
      const shortAnswer = this.examForm.shortAnswer.count * this.examForm.shortAnswer.score;
      return single + multiple + trueFalse + shortAnswer;
    },
    calculatePassRate() {
      const total = this.calculateTotalScore();
      if (total === 0) return 0;
      return Math.round((this.examForm.passScore / total) * 100);
    },
    // 提交保存
    submitForm(formName) {
      // 保存模拟考试设置
      savemnks({
        "bmnksname": this.examForm.name, //#模拟考试名称
        "bmnkstoltime": this.examForm.duration, //#模拟考试时间，默认90分钟
        "bmnksdanxuan": this.examForm.singleChoice.count ,//#单选题数量
        "bmnksdanxuanfs":this.examForm.singleChoice.score,//#单选题分数
        "bmnksduoxuan": this.examForm.multipleChoice.count,//#多选题数量
        "bmnksduoxuanfs": this.examForm.multipleChoice.score,//#多选题分数
        "bmnkspanduan": this.examForm.trueFalse.count,//#判断题数量
        "bmnkspanduanfs": this.examForm.trueFalse.score,//#判断题分数
        "bmnksjianda": this.examForm.shortAnswer.count,//#简答题数量
        "bmnksjiandafs": this.examForm.shortAnswer.score,//#简答题分数
        "bmnksdesc": this.examForm.description,//#设置说明
      }).then(res => {
        console.log('模拟保存：',res)

      })
      // this.$refs[formName].validate((valid) => {
      //   if (valid) {
      //     // 这里提交表单数据到后端
      //     console.log('提交考试设置:', this.examForm);
      //     this.$message.success('考试设置保存成功');
      //   } else {
      //     console.log('表单验证失败');
      //     return false;
      //   }
      // });
    },
    // 重置
    resetForm(formName) {
      this.$refs[formName].resetFields();
      // 重置后重新设置默认值
      this.examForm = {
        name: '模拟考试',
        duration: 90,
        singleChoice: {
          count: 80,
          score: 1
        },
        multipleChoice: {
          count: 10,
          score: 1
        },
        trueFalse: {
          count: 10,
          score: 1
        },
        shortAnswer: {
          count: 10,
          score: 1
        },
        description: ''
      };
    }
  }
}
</script>

<style scoped>
.exam-setting-container {
  padding: 20px;
}

.box-card {
  margin-bottom: 20px;
}

.question-setting {
  display: flex;
  align-items: center;
}

.question-setting span {
  margin: 0 10px;
}

.total-score {
  font-size: 18px;
  font-weight: bold;
  color: #409EFF;
}

.el-divider {
  margin: 20px 0;
}
</style>
